<template>
  <div class="tree-layout">
    <div class="tree">
      <div class="refresh">
        <div @click="refreshClick"><span class="el-icon-refresh" :class="[rotating?'rotating':'']"> </span> 刷新</div>
        <div v-if="copy" @click.self="clickEvent" class="copy-channel">复制频道</div>
      </div>
      <el-tree :props="props" :load="ansyTree" lazy :indent='16' node-key="id"
               :default-expanded-keys="['']"
               @node-click="getNodes"
               v-if="refresh">
                 <span class="custom-tree-node" slot-scope="{ node, data }">
        <span :title="node.label">{{ node.label }}</span>
      </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    props: {
      copy: {
        type: Boolean,
        default: false
      },
      hasContent: {
        type: Boolean,
        default: false
      },
      showChild: {
        type: Boolean,
        default: true
      },
      action: {
        type: String,
        default: ''
      },
      treelevell:{
        type: Number,
        default: 3
      }
    },
    data() {
      return {
        props: {
          label: "name",
          children: "zones",
          isLeaf: "isChild",
          id: "id"
        },
        root: '',
        refresh: true,
        rotating: true,
        channelUrl: this.$store.state.sys.baseUrl + (this.action == "" ? this.$api.contentTree : this.action)
      };
    },
    methods: {
      clickEvent() {
        this.routerLink('/channel/copy', 'copy', 0);
      },
      refreshClick() {
        this.refresh = false;
        setTimeout(() => {
          this.refresh = true;
        }, 100);
      },
      getNodes(data, node) {
        this.$emit('change', data, node);
      },
      ansyTree(node, resolve) {
        let api = this.$api;
        //异步加载树形结构
        if (node.level === 0) {
          return resolve([{
            name: "根目录",
            id: '',
            isChild: false,
            channelType: 3,
            channelLevel: 0,
            roleType: 0,
            modelId: 10
          }]);
        }
        if (node.level > 0) {
          this.rotating = true;
          //console.log(this.channelUrl)
          axios.post(this.channelUrl, {root: node.data.id, hasContent: this.hasContent,showChild:this.showChild}).then(res => {
            this.rotating = false;
            console.log(res.body)
            const data = [];
            for (let i in res.body) {
              let obj = {};
              let channel = res.body[i];
              obj.id = channel.id;
              obj.isChild = channel.childCount > 0 ? false : true;
              obj.name = channel.name;
              obj.modelId = channel.modelId;
              obj.channelType = channel.channelType;
              obj.channelLevel = channel.channelLevel;
              obj.roleType = channel.roleType;
              obj.data = res.body;
              data.push(obj);
            }
            this.$emit('getChannelIds', data);
            return resolve(data);
          }).catch(error => {
            this.rotating = false;
          });
        }
      }
    }
  };
</script>

<style lang='scss' scoped>
  @keyframes rotating {
    from {
      transform: rotate(0)
    }
    to {
      transform: rotate(360deg)
    }
  }

  .rotating {
    animation: rotating 1.2s linear infinite
  }

  .copy-channel {
    color: #4184b7;
  }
</style>
